<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Gojs</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.15/go-debug.js"></script>
</head>

<body>
  <div id="myDiagramDiv" style="width:800px; height:250px; border: 1px solid #DAE4E4;margin: 0 auto;margin-top: 60px;">
  </div>
  <script>
    var $ = go.GraphObject.make;
    var diagram = new go.Diagram("myDiagramDiv");
    diagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
        $(go.TextBlock, {
            margin: 3
          },
          new go.Binding("text", "key"))
      );

    diagram.model = new go.GraphLinksModel(
      [ // a JavaScript Array of JavaScript objects, one per node;
        // the "color" property is added specifically for this app
        {
          key: "Alpha",
          color: "lightblue"
        },
        {
          key: "Beta",
          color: "orange"
        },
        {
          key: "Gamma",
          color: "lightgreen"
        },
        {
          key: "Delta",
          color: "pink"
        }
      ],
      [ // a JavaScript Array of JavaScript objects, one per link
        {
          from: "Alpha",
          to: "Beta"
        },
        {
          from: "Alpha",
          to: "Gamma"
        },
        {
          from: "Beta",
          to: "Beta"
        },
        {
          from: "Gamma",
          to: "Delta"
        },
        {
          from: "Delta",
          to: "Alpha"
        }
      ]);


    diagram.undoManager.isEnabled = true;
  </script>
</body>

</html>